<template>
	<view class="content an-sign-info">
		<view class="an-top-bg">
			<!-- 用户信息 -->
			<view class="an-userInfo">
				<view class="an-user-image">
					<button open-type="getUserInfo" class="an-getUserInfo-btn" v-if="isShowlogin" @getuserinfo="getuserinfoBtn" >
						登录
					</button>
					<image class="an-img" mode="aspectFit" :src="userInfo.avatarUrl"
						@error="imageError"></image>
				</view>
				<view class="an-user-text">
					<text>{{userInfo.nickName}}</text>
				</view>
			</view>
		</view>
		
		<view class="an-radius-body">
			
			<uni-segmented-control :current="current" :values="tabItems" style-type="button" active-color="#07c060" @clickItem="onClickItem" />
			
			<view v-show="current === 0">
				<uni-list>
					<uni-list-item
					v-for="item in list" :key="item.id"
					@tap="clickList(item)"
					:show-arrow="false"
					:title="item.address" 
					:note="item.time" />
				</uni-list>
				
				<uni-load-more :loadingType="loadingType" v-if="total>6 || total==0"></uni-load-more>
			</view>
			<view v-show="current === 1" style="min-height: 350px;">
				<view class="an-user-map">
					<map subkey="FKXBZ-MVL3J-MY7FZ-F4IJQ-BD7W7-RSBDO"
					:latitude="latitude" 
					:longitude="longitude" 
					:markers="covers"  
					:include-points="mappoint">
					                </map>
				</view>
			</view>
			
		</view>
	</view>
</template>
<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default{
		components: {
			uniSegmentedControl,
			uniLoadMore,
			uniList,
			uniListItem
		},
		data(){
			return{
				userInfo:{
					avatarUrl:'',
					nickName: '',
				},
				postData:{
					page:1,
					pageSize: 10,
					openid:'',	// 用户编码
				},
				list:[],
				total:0,
				activeItem:{}, // 操作中的列表
				loadingType: 2, //上拉的状态：0-loading前；1-loading中；2-没有更多了
				tabItems: [
					'列表展示',
					'地图展示'
				],
				current: 0,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],	//标记点用于在地图上显示标记的位置
				mappoint: [],  //定位坐标
				isShowlogin: true  // 是否显示登录
			}
		},
		computed: {
			...mapState(['isRefresh']),
		},
		onLoad(){
			this.anLoad()
		},
		onShow(){	// 每次打卡页面执行
			if(this.isRefresh){	// 如果需要刷新数据
				this.getList()
				this.setIsRefresh(false)	// 刷新完成 还原状态
			}
		},
		methods:{
			...mapMutations(['setUserInfo','setAuthSetting','setIsRefresh']),
			...mapActions(['getUserInfo']),
			anLoad(){
				this.getUserInfo().then(res=>{
					this.isShowlogin = false
					this.userInfo = res
					this.postData.openid = res.openid
					this.getList()
				})
			},
			getuserinfoBtn(e){  //授权弹按钮回调事件，获取用户信息
				if(e.detail.userInfo){
					this.setUserInfo(e.detail.userInfo)
					let _this = this
					uni.getSetting({  // 重新获取授权列表
					   success(res) {
						  _this.setAuthSetting(res.authSetting)
						  _this.anLoad()
					   }
					}) 
				}
			},
			getList(page){
				this.loadingType = 1
				if(page){
					this.postData.page = page
				}
				if(this.postData.page === 1){
					this.list = []
				}
				this.$api.wxGetUserSign(this.postData).then(res=>{
					this.list.push(...res.list); 
					this.total = res.total
					this.loadingType = 0
					this.showMap()
					this.changeLoading()
				})
			},
			changeLoading(){	// 更新加载组件状态
				if(this.total === 0 || Math.ceil(this.total/this.postData.pageSize)<=this.postData.page){
					this.loadingType = 2
				}
			},
			onReachBottom() {	// 页面到底 触发
				if (this.loadingType !== 0) {
					return;
				}
				if(Math.ceil(this.total/this.postData.pageSize)>this.postData.page && this.total != 0 ){
					this.postData.page += 1
					this.getList()
				}else{
					this.loadingType = 2
				}
			},
			showMap(){	// 地图上面显示定位点
				let newdata = this.list;
				let newmapdata = [];
				let newmappoint = [];
				let newPolyline = [];
				for(let i= 0;i<newdata.length; i++){
				  if (newdata[i].longitude != null && newdata[i].latitude != null){
					newmapdata.push({
						id:newdata[i].id,
						iconPath: '../../static/img/location.png',
						longitude: newdata[i].longitude,
						latitude: newdata[i].latitude,
						width:'50',
						height:'50',
						callout:{
							content: newdata[i].time
						}
					});
					newmappoint.push({
						longitude: newdata[i].longitude,
						latitude: newdata[i].latitude,
					});
				  }
				}
				this.covers = newmapdata
				this.mappoint = newmappoint
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
			clickList(item){	// 列表点击
				this.targetItem = item
				let url = '/pages/shareLocation/shareLocation?scene='+ encodeURIComponent(item.id)
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>
<style lang="scss">
.an-sign-info{
	.an-top-bg{
		position: absolute;
		top:0;
		right: 0;
		left: 0;
		color: #ffffff;
		height:100px;
		padding: 20px;
		//background-color: #bb51fb; //bb51fb  883ffe
		background:linear-gradient(to bottom right, #07c060, #019548);
		z-index: 1;
		.an-userInfo{
			display: flex;
			align-items: center;
			.an-user-image{
				flex : 0 0 auto;
				width: 60px;
				height: 60px;
				border-radius: 50%;
				margin-right: 15px;
				overflow: hidden;
				background-color: #fbf9fe;
				.an-getUserInfo-btn{
					height: 60px;
					line-height: 60px;
					font-size: 14px;
				}
				.an-img{
					width: 60px; 
					height: 60px;
					background-color: #fbf9fe;
				}
			}
			.an-user-text{
				font-size: 16px;
				
			}
		}
	} 
	.an-radius-body{
		position: absolute;
		top: 100px;
		left: 0;
		right: 0;
		z-index: 2;
		width: auto;
		padding:0;
		background-color: #FFFFFF;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		overflow: hidden;
	}
	.segmented-control{
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.an-user-map{
		position: fixed;
		top: 155px;
		bottom:0;
		left:0;
		right:0;
	}
	.an-user-list{
		width: 100%;
	}
}
</style>